<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <el-input v-model="query.phone" clearable placeholder="输入搜索用户手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.nickname" clearable placeholder="输入搜索用户名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.serialNumber" clearable placeholder="输入搜索序列号" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.cardName" clearable placeholder="输入搜索卡名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <el-button
        type="danger"
        class="filter-item"
        size="mini"
        icon="el-icon-refresh"
        @click="toQuery"
      >刷新</el-button>

      <el-button
        type="danger"
        class="filter-item"
        size="mini"
        icon="el-icon-refresh"
        @click="toDownloadClick"
      >导出</el-button>

      <!--表单组件-->
      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="title" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
         <el-form-item label="审核结果">
           <el-select v-model="form.status" clearable placeholder="请选中审核结果" class="filter-item" style="width: 370px">
             <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" />
           </el-select>
         </el-form-item>
          <el-form-item label="理由">
            <textarea v-model="form.remark" style="width: 370px;height: 200px;"></textarea>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>

      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="55" label="序号">
              <template scope="scope">
                <span>{{((page+1) - 1) * size + scope.$index + 1}}</span>
                </template>
            </el-table-column>
        <el-table-column  prop="userId" label="用户" >
          <template slot-scope="scope">
                <div style="display: flex;flex-direction: row;align-items: center;">
                   <img :src="scope.row.avatar" style="width: 50px;height: 50px; border-radius: 25px;" />
                   <div style="font-size: 13px;margin-left: 10px;">{{scope.row.nickname}}-{{scope.row.phone}}</div>
                </div>
            </template>
         </el-table-column>
        <el-table-column  prop="title" label="卡名称" />
        <el-table-column  prop="serialNumber" label="序列号" />
        <el-table-column  prop="type" label="类型" >
           <template slot-scope="scope">
             <el-tag v-if="scope.row.type === 1" style="cursor: pointer;background-color: red;color: white;" :type="'info'">绑定</el-tag>
             <el-tag v-if="scope.row.type === 2" style="cursor: pointer;background-color: green;color: white;" :type="'info'">解绑</el-tag>
           </template>
        </el-table-column>
        <el-table-column  prop="bondTime" label="操作时间" />

      </el-table>
      <!--分页组件-->
     <el-pagination
       :total="total"
       :current-page="page + 1"
       style="margin-top: 8px;"
       layout="total, prev, pager, next, sizes"
       @size-change="sizeChange"
       @current-change="pageChange"
     />
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/crud'
  import checkPermission from '@/utils/permission'
  import { toDownload } from '@/api/hcsBondLog'
  import { parseTime, downloadFile } from '@/utils/index'

export default {
 mixins: [initData],
  data() {
    return {
      isAdd:true,
       loading: false, dialog: false,
       delLoading: false,
       title:"新增",
       statusList:[
         {name:'已通过',value:1}, {name:'已拒绝',value:-1}
       ],
       form:{
         id: '',
         productName :"",
         title: "",
         code:"",
         mainUrl :"",
         mainUrlArr: [],
         urls:"",
         urlsArr :[],
         primaryNum: 0,
         differentNum:0,
         specialNum:0,
         points:0,
         specialNum:0,
      },

      rules: {
      }

        }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  watch: {
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/hcsBondLog'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      return true
    },

    add(){
      this.dialog = true
      this.isAdd = true
      // this.resetForm()
    },
    toDownloadClick(){
      let params = [];
      if (this.query.phone) params.push("phone=" + encodeURIComponent(this.query.phone));
      if (this.query.nickname) params.push("nickname=" + encodeURIComponent(this.query.nickname));
      if (this.query.cardName) params.push("cardName=" + encodeURIComponent(this.query.cardName));
      if (this.query.serialNumber) params.push("serialNumber=" + encodeURIComponent(this.query.serialNumber));
      
      let param = params.join("&");
       // var param = "phone="+this.query.phone+"&nickname="+this.query.nickname+"&cardName="+this.query.cardName+"&serialNumber="+this.query.serialNumber
       toDownload(param).then(res => {
         downloadFile(res, '解绑日志导出数据', 'xlsx')
         this.init()
       }).catch(err => {
         console.log(err.response.data.message)
       })
    },

  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
